<template>
  <div class="flex grow column" style="height: 100%; width: 100%">
    <Chart
      ref="highcharts"
      class="grow column"
      style="width: 100%; min-height: 453px"
      :options="chartOptions"
    ></Chart>
  </div>
</template>
<script>
import Highcharts from "highcharts";
import highchartsMore from "highcharts/highcharts-more";
highchartsMore(Highcharts);
import * as api from "../../api/api";
import { timeFormat } from "../../script/fn";

import { Chart } from "highcharts-vue";
function getVersion() {
  let p = { version: 4 };
  location.search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (p[k] = v));
  return p;
}
const { version, productId } = getVersion();
// let charData = Array.from({ length: 5 }, (_, i) => ({
//   dataLabels: { style: { fontSize: 13 + 3 * i + "px" } },
//   data: [{ name: "证券-" + (i + 1), value: (i + 1) * 3 }]
// }));
export default {
  components: { Chart },
  data() {
    return {
      msg: "",
      chartOptions: {
        chart: {
          type: "packedbubble",
          height: "100%",
          backgroundColor: "transparent",
        },
        // responsive: {
        //   rules: [
        //     {
        //       // 在图表小于 500px 的情况下关闭图例
        //       condition: {
        //         // 响应条件
        //         minHeight: 453,
        //         callback: function() {
        //           console.log(this);
        //         }
        //       }
        //     }
        //   ]
        // },
        legend: { enabled: false },
        title: { text: "" },
        tooltip: { enabled: false },
        credits: { enabled: false },
        navigation: { buttonOptions: { enabled: false } },
        colors: ["#1BC8FA", "#FF2626", "#FFC000", "#FF6C00", "#000000"],
        plotOptions: {
          series: {
            animation: false,
            enableMouseTracking: true,
            cursor: "pointer",
            point: {
              events: {
                click: ({ point }) => {
                  this.$router.push({
                    name: "Detail",
                    params: { articleId: point.articleId },
                  });
                },
              },
            },
          },
          packedbubble: {
            minSize: "20%",
            maxSize: "50%",
            useSimulation: true,
            layoutAlgorithm: {
              splitSeries: false,
              gravitationalConstant: 0.02,
            },
            liveRedraw: false,

            dataLabels: {
              enabled: true,
              format: "{point.name}",
              style: {
                color: "white",
                textOutline: "none",
                fontWeight: "normal",
              },
            },
          },
        },
        series: [],
      },
    };
  },
  computed: {},
  mounted() {
    this.queryArticleStock();
  },
  methods: {
    async queryArticleStock() {
      const pId = localStorage.getItem("productId");
      this.ArticleStock = await api.queryArticleStock({
        productId: version == 4 ? productId || pId : "",
      });
      this.queryArticleList();
    },
    async queryArticleList() {
      const arr = this.ArticleStock.filter(
        (item) => item.articleTypeName == "今日风口"
      );
      const data = await api.queryArticleList({
        timeType: "", //30
        articleType: arr[0].articleTypeId,
      });

      //   this.articleList = Array.from({ length: 20 }, () => data[0]);

      //   return;
      this.articleList = data.map((item) => {
        item.formatTime = timeFormat(item.publishTime);
        item.name = item.articleTitle;
        item.value = item.popularIndex;
        return item;
      });
      window.articleList = this.articleList;
      this.chartOptions.series = Array.from(this.articleList, (item) => ({
        dataLabels: {
          style: {
            fontSize: 12 + 3 * item.value + "px",
          },
        },
        data: [
          {
            name: item.name,
            value: (item.value + 1) * 3,
            articleId: item.articleId,
          },
        ],
      }));
    },
  },
};
</script>

<style scoped lang="scss"></style>
